<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <canvas id="canvas"></canvas>
  <script>
    /** @type {HTMLCanvasElement} */
    var canvas=document.querySelector("#canvas")
    var ctx=canvas.getContext("2d")
    canvas.width=window.innerWidth
    canvas.height=window.innerHeight
    // canvas.width=400
    // canvas.height=400
    var canvas2=document.createElement("canvas")
    var ctx2=canvas2.getContext("2d")
    // canvas2.width=400
    // canvas2.height=400
    canvas2.width=canvas.width
    canvas2.height=canvas.height
    // ctx.fillStyle="red"
    document.querySelector("body").appendChild(canvas2)
    ctx2.fillStyle="skyblue"
    // ctx2.fillRect(0,0,400,400)
    ctx2.font="200px serif"
    ctx2.fillText("王俊凯!",canvas2.width/4,canvas2.height/2)
    // ctx2.fillRect(0,0,200,200)
    var data=ctx2.getImageData(0,0,canvas2.width,canvas2.height).data
    ctx2.clearRect(0,0,200,200)
    document.querySelector("body").removeChild(canvas2)
    // ctx2.clearRect(0,0,200,200)
    // console.log(data);
    // console.log(data);
    var ball=[]
    function Ball(x,y,vx,vy,color){
      this.x=x
      this.y=y
      this.vx=vx
      this.vy=vy
      this.color=color
      this.time=0
      this.draw=function(){
        this.time++
        ctx.beginPath()
        ctx.save()
        // ctx.strokeStyle="yellow"
        ctx.fillStyle=this.color
        ctx.arc(this.x,this.y,2,0,Math.PI*2)
        // ctx.fillStyle="yellow"
        // console.log(ctx.fillStyle);
        
        // console.log(this.rgba);
        // console.log(ctx.fillStyle);
        // console.log(this.rgba);
        ctx.fill()
        ctx.restore()
        
        ctx.closePath()
        if(this.time>50){
          this.update()
        }
        
        // console.log(ctx.fillStyle);
      }
      this.update=function(){
        
        this.x+=this.vx
        this.y+=this.vy
        // this.y+=2
      }
    }
    for(let i=0;i<data.length;i+=32){
      // let r=data[i]
      // let g=data[i+1]
      // let b=data[i+2]
      let a=data[i+3]
      let r=Math.floor(Math.random() * 256)
      let g=Math.floor(Math.random() * 256)
      let b=Math.floor(Math.random() * 256)
      // let a=255
      // Math.floor((Math.random()*10)+1)
      let vx=(Math.random()-0.5)*3
      // let vx=(Math.random())*3
      // let vy=(Math.random())*3
      let vy=(Math.random()-0.5)*3
      let rgba="rgba("+r+","+g+","+b+","+255+")"
      let x=i/4%canvas.width
      let y=i/4/canvas.width|0+2
      if(a!=0){
        ball.push(new Ball(x,y,vx,vy,rgba))
      }
      // console.log(11);
    }
    // console.log(ball);
    function dong(){
    ctx.clearRect(0,0,canvas.width,canvas.height)
      for(var j=0;j<ball.length;j++){
      ball[j].draw()
    }
    requestAnimationFrame(dong)
    }
    dong()
  </script>
</body>
</html>